<template>
	<view style="display: flex;flex-direction: column;align-items: center;">
		<view style="padding: 15rpx 30rpx; width: 100%;background-color: #fff;">
			<view class="headerWrapper">
				预约咨询
				<u-switch v-model="adviceAble"   size="40"></u-switch>
			</view>
		</view>
		
		<view class="contentWrapper">
			<view class="title">
				收集项
			</view>
			<view v-for="(item, index) in attribute" :key="index" class="item">
				<view class="delete">
					<image v-if="!item.disabled" @click="onDelete(index)" src="@/static/image/icon_note_delete1.png" style="width: 100%;height: 100%;" mode=""></image>
				</view>
				<input v-model="item.title" :disabled="item.disabled" class="inputWrapper" placeholder="请输入标题" />	
				<view style="display: flex;align-items: center;"  @click="onSelect(item)">
					<view class="select" >
						<image v-if="item.require" src="@/static/image/icon_note_require_s.png" style="width: 100%;height: 100%;" mode=""></image>
					</view>
					必填
				</view>
				

				<view class="newAdd">
					<image v-if="!item.disabled" src="@/static/image/icon_note_new_add.png" style="width: 100%;height: 100%;" mode=""></image>
				</view>
				
			</view>
		</view>
		
		<view class="addBtn" @click="onAdd">
			<image class="icon" src="@/static/image/icon_note_add.png" mode=""></image>
			新增收集项
		</view>
		
		<view style="height: 200rpx;">
			
		</view>
		<view class="bottomBtnContainer">
			<view class="bottomBtnWrapper" @click="onSave">
				保存
			</view>
		</view>
	</view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null
	
	
    
	export default {
		data() {
			return {
				adviceAble: false,
				attribute: [],
				nodeObj: {}
			};
		},
        
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo, 
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        
        onLoad(options) {
            that = this;
			if (options.obj){
				var nodeObj = JSON.parse(options.obj)
				that.nodeObj = nodeObj
				if (nodeObj){
					this.adviceAble = nodeObj.adviceAble||false
					if (nodeObj.attribute&&nodeObj.attribute.length>=2){
						this.attribute = JSON.parse(nodeObj.attribute)
					}else{
						this.attribute = [
							{
								title: "姓名",
								inputType: "string",
								require: false,
								disabled: true,
							},
							{
								title: "手机号",
								inputType: "phone",
								require: true,
								disabled: true,
							},
						]
					}
				}
			}
        },
        onShow() {
      
        },
        methods:{ 
            ...mapMutations(['setUserInfo', 'setLoginStatus', 'setUserId',"setOrigin"]),
            onSave(){
				api.getNoteUpate({
					param: {
						id: that.nodeObj.id,
						adviceAble: that.adviceAble,
						attribute: JSON.stringify(that.attribute),
					}
				}).then(res => {
					console.log("createNote", res)
					if (res.success) {
						uni.showToast({
							icon: "none",
							title: "保存成功"
						})
					}
				})
			},
			
			onSelect(item){
				item.require = !item.require;
			},
			onDelete(index){
				this.attribute.splice(index,1)
			},
			onAdd(){
				this.attribute.push({			
					title: "",
					inputType: "string",
					require: false,
					disabled: false,				
				})
			},
        }
	}
</script>

<style lang="scss">
	page{
		background-color: #f8f8f8;
	}
	.headerWrapper{
		width: 100%;
		padding: 30rpx 80rpx;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: bold;
		color: #3e3a39;
	}
	.contentWrapper{
		padding: 0 50rpx 30rpx 50rpx; 
		width: 714rpx;
		background-color: #fff;
		margin-top: 20rpx;
		.title{
			height: 80rpx;
			text-align: center;
			width: 100%;
			line-height: 80rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #222;
			border-bottom: 1px solid #eee;
		}
		.item{
			width: 100%;
			height: 93rpx;
			border-bottom: 1px solid #eee;
			color: #888;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 22rpx;
			font-weight: bold;
			.delete{
				width: 33rpx;
				height: 33rpx;
			}
			.inputWrapper{
				width: 370rpx;	
				color: #303030;
				font-size: 26rpx;
			}
			.select{
				width: 22rpx;
				height: 22rpx;
				margin-right: 15rpx;
				background-size: 100% 100%;
				background-image: url(@/static/image/icon_note_require_n.png);
			}
			.newAdd{
				width: 24rpx;
				height: 24rpx;

			}
		}
	}
	
	.addBtn{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 714rpx;
		height: 88rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #3e3a39;
		margin-top: 20rpx;
		background-color: #fff;
		.icon{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
	}
</style>
